<template>
  <div class="myBox">
    <li class="myli">
      <slot name="title"></slot>
    </li>
    <div class="mydiv">
      <slot name="mydiv"></slot>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },

  methods: {},

  components: {},
}
</script>

<style scoped>
.myBox {
  padding: 10px 8px 10px 8px;
}
.myli {
  font-size: 17px;
  color: gray;
  margin-bottom: 5px;
}

.mydiv {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}
.mydiv > div {
  width: 25%;
  text-align: center;
  padding: 3px 0 3px 0;
  box-sizing: border-box;
}
.mydiv li {
  font-size: 12px;
  color: #000000;
}
</style>
